<template>
  <div class="tenantManagement-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="首页" name="index">

        <div style="display:flex;margin-bottom: 10px;word-wrap: break-word">轮播图</div>
        <div style="display:flex;margin-bottom: 10px;word-wrap: break-word;text-align: center">
          <div v-for="(item,index) in imgList" style="padding: 10px;background-color: #f1f1f1;margin-right: 10px">
            <div style="display:block;">
              <UploadImage ref="UploadImage" :autoCropHeight="300" :autoCropWidth="600" :fixedNumber="[2,1]"
                           :imgageUrl="item.url"
                           :index="index"
                           :limit="1"
                           @returnImgUrl="returnImgUrl"></UploadImage>
              <el-input v-model="item.text" style="margin-top: 10px"></el-input>
              <el-input v-model="item.fwblj" placeholder="富文本连接" style="margin-top: 10px"></el-input>
              <el-button style="margin-top: 10px" type="danger" @click="imgListremove(item)">删除</el-button>
            </div>
          </div>
        </div>
        <el-button type="primary" @click="imgListadd">增加一个</el-button>
        <el-button type="primary" @click="save">保存</el-button>

      </el-tab-pane>
      <el-tab-pane label="会员" name="vip">
        <div style="display:flex;margin-bottom: 10px;word-wrap: break-word">会员类型</div>
        <div style="display:flex;margin-bottom: 10px;word-wrap: break-word;text-align: center ;width: 300px;">
          <div v-for="(item,index) in vipList" style="padding: 10px;background-color: #f1f1f1;margin-right: 10px">
            <div style="display:block;">

              <el-input v-model="item.title" placeholder="会员名称" style="margin-top: 10px"></el-input>
              <el-input v-model="item.number" placeholder="可预约次数" style="margin-top: 10px" type="number"></el-input>
              <el-input v-model="item.dayNumber" placeholder="可使用的天数" style="margin-top: 10px" type="number"></el-input>
              <el-input v-model="item.fwblj" placeholder="富文本连接" style="margin-top: 10px"></el-input>
              <el-button style="margin-top: 10px" type="danger" @click="vipListremove(item)">删除</el-button>
            </div>
          </div>
        </div>
        <el-button type="primary" @click="vipListaddd">增加一个</el-button>
        <el-button type="primary" @click="vipListsave">保存</el-button>

      </el-tab-pane>
      <el-tab-pane label="我的" name="my">我的</el-tab-pane>
      <!--      <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>-->
    </el-tabs>

  </div>
</template>

<script>

import UploadImage from "@/views/modules/common/UploadImage";
import {isNull} from "@/utils/validate";
import {doUpdate, getByCode} from "@/api/system/options/SysOptionsManagement";

export default {
  name: "MINIAPPCONFIG",
  components: {UploadImage},
  data() {
    return {
      vipList: [],
      activeName: 'index',
      imgList: [],
      gonggao: {
        text: "",
        id: "1851208254063964162",
        optionCode: "miniappconfiggundonglan",
      },
      vipListform: {
        id: "1851603403992076289",
        optionCode: "vipList",

      },
      gundonglanform: {
        id: "1851208254063964162",
        optionCode: "miniappconfiggundonglan",
      }
    };
  },
  created() {
    this.fetchDatagundonglan();
  },
  mounted() {

  },
  methods: {
    returnImgUrl(e, index) {
      this.imgList[index].url = e
    },
    imgListremove(item) {
      this.imgList = this.imgList.filter(i => i !== item)
    },
    imgListadd() {
      this.imgList.push({
        url: null,
        text: null,
        fwblj: null,
      })
    },
    vipListaddd() {
      this.vipList.push({
        title: null,
        dayNumber: 0,
        number: 0,
        fwblj: null,
      })
    },
    vipListremove(item) {
      this.vipList = this.vipList.filter(i => i !== item)
    },
    async save() {
      if (this.imgList.length == 0) {
        this.$message.error('至少上传一个')
        return
      }
      for (const argument of this.imgList) {
        if (!argument.url) {
          this.$message.error('请上传图片')
          return
        }
        if (!argument.text) {
          this.$message.error('请输入描述')
          return
        }
      }
      this.gundonglanform.optionValue = JSON.stringify(this.imgList)
      if (!isNull(this.gundonglanform.id)) {
        const {msg} = await doUpdate(this.gundonglanform);
        this.$baseMessage(msg, "success");
      }
      // miniappconfiggundonglan
    },


    async vipListsave() {
      if (this.vipList.length == 0) {
        this.$message.error('至少上传一个')
        return
      }
      for (const argument of this.vipList) {
        if (!argument.title) {
          this.$message.error('请输入会员名称')
          return
        }
        if (!argument.number) {
          this.$message.error('请输入可预约次数')
          return
        }
        if (!argument.outDate) {
          this.$message.error('请输入到期日期')
          return
        }
        if (!argument.fwblj) {
          this.$message.error('请输入富文本连接')
          return
        }
      }
      this.vipListform.optionValue = JSON.stringify(this.vipList)
      if (!isNull(this.vipListform.id)) {
        const {msg} = await doUpdate(this.vipListform);
        this.$baseMessage(msg, "success");
      }
    },
    async fetchDatagundonglan() {
      let {msg, data} = await getByCode({
        optionCode: "miniappconfiggundonglan",
      });
      this.imgList = JSON.parse(data.optionValue)

    },
    async fetchDatagundonglan2() {
      let {msg, data} = await getByCode({
        optionCode: "vipList",
      });
      this.vipList = JSON.parse(data.optionValue)

    },
    handleClick(tab, event) {
      if (tab.index == 0) {
        this.fetchDatagundonglan()
      }
      if (tab.index == 1) {
        this.fetchDatagundonglan2()
      }
    }
  },
};
</script>

